<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- 下拉框 -->
 <link rel="stylesheet" href="/static/ace/css/chosen.css" /> 
<!-- 日期框 -->
 <link rel="stylesheet" href="/static/ace/css/datepicker.css" /> 
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
 <script src="/static/ace/js/bootbox.js"></script>
<!-- ace scripts -->
<script src="/static/ace/js/ace/ace.js"></script>
<!-- 下拉框 -->
<script src="/static/ace/js/chosen.jquery.js"></script>
<!-- 日期框 -->
<script src="/static/ace/js/date-time/bootstrap-datepicker.js"></script>
<!--提示框-->
<script type="text/javascript" src="/static/js/jquery.tips.js"></script> 
<style type="text/css">
	.layui-table-tips-main{display:none}
	.layui-table-tips-c{display:none}
</style>
</head>
<body class="layui-layout-body">
	<div class="layui-form"  style="margin-top: 20px;">
		<div class="layui-form toolbar">
			<div class="layui-form-item">
				<div class="layui-inline">
					<div class="layui-inline">
						<div class="layui-input-inline mr0" style="margin-left: 10px;">
							<select name="status" lay-filter="status"  lay-search  id="status">
								<option value="">请选择商品类型</option>
								<option value="0">菜单</option>
								<option th:each="first : ${firstMenu}" th:value="${first.hmenuId}">[[${first.hmenuName}]]</option>
							</select>
						</div>
					</div>
					<div class="layui-inline">
						<div class="layui-input-inline mr0">
							<input id="authEdtSearch" class="layui-input" type="text" autocomplete="off" placeholder="输入菜单关键字">
						</div>
					</div>
					<div class="layui-inline">
						<button id="authBtnSearch" class="layui-btn icon-btn layui-btn-normal"><i class="layui-icon"></i>搜索</button>
						<button id="authBtnAdd" class="layui-btn icon-btn layui-btn-normal"><i class="layui-icon"></i>添加菜单</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--  数据data -->
	<div class="layui-row" style="padding: 10px 10px;" id="tablediv">
		<table id="table_data" lay-filter="test"  ></table>	
	</div>
	<!-- 表格操作列 -->
	<script type="text/html" id="authTableBar">
  		<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs"  lay-event="del">删除</a>
	</script>

<!-- 表格状态列 -->
<script type="text/html" id="tbaleState">
    <input type="checkbox" lay-filter="ckState" value="{{d.hmenuId}}" lay-skin="switch" lay-text="上线|下线"
           {{d.isOnSale==1?'checked':''}}/>
</script>

	
	<script type="text/javascript">
	$(top.hangge());//关闭加载状态
	var tableIns ;
	var layer ;
	layui.use(['layer', 'form', 'table','element'], function(){
		  var table = layui.table;
		  var form = layui.form;
		  var element = layui.element;
		  layer=layui.layer;
		  
		  //加载层
		  var loadingIndex =layer.msg('数据加载中...', {
			   icon: 16
			  ,shade: 0.01
		  });  
		  
		  //第一个实例
		  var params = {};
		  tableIns = table.render({
		    elem: '#table_data',
		    url: '/admin/umenu/findListData',
		    page: true, //开启分页
		    where:params,
		    loading:true,
		    height: 'full-150',
		    cols: [
		    	[ //表头
		    	{field:'hmenuId',title: '编号', hide: true}
               , {field: 'hmenuSn', title: '菜单编号'}
               , {field: 'hmenuName', title: '菜单名称'}
               , {field: 'hparentId', title: '菜单分类'}
               , {field: 'hmenuUrl', title: '菜单路径'}
               , {field: 'hmenuTime', title: '创建时间'}
               , {field: 'hmenuCtime', title: '修改时间'}
               , {field: 'isOnSale',templet: '#tbaleState', title: '状态'}
		       , {templet: '#authTableBar', minWidth: 180, align: 'center', title: '操作'}
		    	]
		   		],
		    done:function(res){
		    	layer.close(loadingIndex);
		    }
		  });
		  
		  //数据操作
		  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			    var data = obj.data //获得当前行数据
			    ,layEvent = obj.event; //获得 lay-event 对应的值
			    var hmenuId=data.hmenuId;
			    if(layEvent === 'del'){
			    	layer.confirm('确认要删除选中的行？', function(index){
			        obj.del(); //删除对应行（tr）的DOM结构
			        layer.close(index);
			        //向服务端发送删除指令
			        del(hmenuId);
			      });
			    } else if(layEvent === 'edit'){
			    	showEditModel(hmenuId);
			    } 
			  });
		  
		  //状态修改
		  form.on('switch(ckState)', function (obj) {
	             layer.load(2);
	             $.get('/admin/umenu/updateMenuStatus', {
	            	 hmenuId: obj.elem.value,
	            	 isOnSale: obj.elem.checked ? 1 : 0
	             }, function (data) {
	                layer.closeAll('loading');
	                if (data.code == 0) {
	                    layer.msg(data.msg, {icon: 1});
	                } else {
	                    layer.msg(data.msg, {icon: 2});
	                    $(obj.elem).prop('checked', !obj.elem.checked);
	                    form.render('checkbox');
	                }
	            }, 'json');
	        });
		  
		 
	});
	
	
	//添加菜单
	$("#authBtnAdd").click(function(){
		 layer.open({
			  title:'新增商品',
			  content: '/admin/umenu/goAdd',
			  type: 2, 
			  area: ['60%', '85%'],
			  scrollbar: true,
			  cancel: function(index, layero){ 
				  
			  } ,
			  end:function(){
				  Refresh();
			  }
		}); 
	});
	
	//修改机构信息
	function showEditModel(hmenuId){
		layer.open({
			  title:'编辑商品',
			  content: '/admin/umenu/edit?hmenuId='+hmenuId,
			  type: 2, 
			  area: ['60%', '85%'],
			  cancel: function(index, layero){ 
				  
			  },
			  end:function(){
				  Refresh();
			  }
		});
	}
	
	//搜索
	$("#authBtnSearch").click(function(){
		Refresh();
	});
	//刷新
	function Refresh(){
		var params = {};
		var authEdtSearch=$("#authEdtSearch").val();
		var hparentId=$("#status").val();
		params.keywords=authEdtSearch;
		params.hparentId=hparentId;
		tableIns.reload({
			  where:params
			  ,page: {
				    curr: 1 //重新从第 1 页开始
				  }
		});	
	}
	
	//删除
	function del(hmenuId){
		var params={};
		params.hmenuId=hmenuId;
		$.ajax( {
	         url : '/admin/umenu/delete', 
	         type : 'post',
	         data: params,
	         dataType : 'json',
	         success : function(data) {
	        	 if(data.code==0){
	        		 layer.msg('删除成功',{icon: 1});
	        		 Refresh();
	        	 }else{
	        		 layer.msg(data.msg,{icon: 2});
	        	 }
	         }
	     });
	}
	</script>


</body>
</html>